<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Brokers</title>
    <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="../../css/common/bootstrap.css">
  <!-- font-awsome -->
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> -->
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../css/common/AdminLTE.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="../../css/common/skins/_all-skins.min.css">
  <link rel="stylesheet" href="../../css/common/skins/skin-green.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="../../plugins/iCheck/flat/blue.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="../../plugins/morris/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="../../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
  
  <!-- 字体图标和iconfont -->
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../css/common/font-awesome.css">
    <!-- iconfont字体图标 -->
  <link rel="stylesheet" href="../../css/common/portalInFrame-iconfont.css">
  <link rel="stylesheet" href="../../css/spiderMonitor/spiderMonitor.css"/>
  <link rel="stylesheet" href="../../css/kafkaMonitor/kafkaMonitor.css"/>
</head>
<body class="hold-transition skin-green sidebar-mini">
<div class="wrapper">

  <header class="main-header">
    <!-- Logo -->
    <a href="#" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><!-- <i class="iconfont">&#xe60e;</i> -->S·M</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>SpiderMonitor</b></span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- Messages: style can be found in dropdown.less-->
          <li class="dropdown messages-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon icon-envelope"></i>
              <!-- <span class="label label-success">4</span> -->
            </a>
          </li>
          <!-- Notifications: style can be found in dropdown.less -->
          <li class="dropdown notifications-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon icon-bell"></i>
              <!-- <span class="label label-warning">10</span> -->
            </a>
    
          </li>
          <!-- Tasks: style can be found in dropdown.less -->
          <li class="dropdown tasks-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon icon-flag"></i>
              <!-- <span class="label label-danger">9</span> -->
            </a>
          
          </li>

          <!-- Control Sidebar Toggle Button -->
          <li>
            <a href="#" data-toggle="control-sidebar"><i class="icon icon-gears"></i></a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- search form -->
      <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-control" placeholder="Search...">
              <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="icon icon-search"></i>
                </button>
              </span>
        </div>
      </form>
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu">
        <li class="header"></li>
        <li class="active treeview">
          <a href="" style="font-size:18px;">
            <i class="iconfont">&#xe63b;</i>&nbsp;&nbsp;<span>SpiderMonitor</span>
          </a>
          <ul class="treeview-menu">
            <li class="active">
            	<a href="../kafkaMonitor/kafka-index.html">
            		<i class="iconfont">&#xe6e8;</i>&nbsp;&nbsp;<span>KafkaMonitor</span>
            		<span class="pull-right-container">
            			<i class="fa fa-angle-left pull-right"></i>
            		</span>
            	</a>
            	<!-- <ul class="treeview-menu menu-open">
					<li>
						<a href="../kafkaMonitor/kafka-consGroups.html"><i class="fa fa-circle-o iconfont">&#xe601;</i>Consumer Groups</a>
					</li>
					<li>
						<a href="../kafkaMonitor/kafka-topiclist.html"><i class="fa fa-circle-o iconfont">&#xe601;</i>Topic List</a>
					</li>
					<li>
						<a href=""><i class="fa fa-circle-o iconfont">&#xe601;</i>Visualizations</a>
					</li>
				</ul> -->
            </li>
           <!--  <li class="active"><a href="">
            	<i class="iconfont">&#xe8cb;</i>&nbsp;&nbsp;<span>ServicesMonitor</span>
            	<span class="pull-right-container">
            		<i class="fa fa-angle-left pull-right"></i>
            	</span>	
            	</a>
            	<ul class="treeview-menu menu-open">
					<li>
						<a href="../kafkaMonitor/services-list.html"><i class="fa fa-circle-o iconfont">&#xe601;</i>Service List</a>
					</li>
				</ul>
            </li> -->
           	<li class="active"><a href="../zkMonitor/zookeeper-index.html"><i class="iconfont">&#xe6f0;</i>&nbsp;&nbsp;<span>ZookeeperMonitor</span></a></li>
          </ul>
        </li>
        
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Main content -->
    <section class="content">
    <div id="content">
    <section class="content-header">
        <h1>KafkaMonitor</h1>
        <ol class="breadcrumb">
          <li>
            <a href="">
              <i class="iconfont">&#xf0068;</i>
            </a>
          </li>
          <li class="active">
            <a href="../kafkaMonitor/kafka-index.html">KafkaMonitor</a>
          </li>
          <li class="active">
            Brokers
          </li>
        </ol>
      </section>
      <section class="content">
      <div  class="row" style="margin-top:20px;">
          <div class="col-sm-12 col-md-6 col-lg-6 " >
            <div class="box box-logisticalman">
                <div class="box-header with-border">
                  <h3 class="box-title">Brokers</h3>
                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="remove">
                      <i class="fa fa-times iconfont">&#xe619;</i>
                    </button>
                  </div>
                <div class="box-body">
                <table id="example2" class="table table-bordered table-hover">
                  <thead>
                  <tr>
                    <th>Id</th>
                    <th>Host</th>
                    <th>Port</th>
                    <th>JMX Port</th>
                    <th>Bytes In</th>
                    <th>Bytes Out</th>
                    <th>Size</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td><a href="../kafkaMonitor/kafka-brokerId1.html">0</a></td>
                    <td>192.168.213.128</td>
                    <td>9091</td>
                    <td>8999</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0B</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>192.168.213.129</td>
                    <td>9091</td>
                    <td>8999</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0B</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>192.168.213.134</td>
                    <td>9091</td>
                    <td>8999</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0B</td>
                  </tr>
                  </tbody>
                </table>
              </div>
                </div>
              </div>
          </div>
        </div>
      </section>
    </div>
    </section>
    
    <!-- /.content -->
</div>
</body>
<!-- ./wrapper -->
<!-- jquery -->
<script src="../../js/common/jquery.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6 -->
<script src="../../js/common/bootstrap.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="../../plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="../../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="../../plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="../../plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="../../plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../js/common/app.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../../js/common/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../js/common/demo.js"></script>

<!-- 额外添加自己的css、js -->
<!-- <link rel="stylesheet" href="../../css/common/content-row.css"> -->
<!-- echarts -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=NNwaocbmYc1Z7meFumEoGKEawDBMnz59&v=2.0&services=true"></script>

<script src="../../js/Monitor/clusterVisualization.js"></script>
</html>
